<template>
  <div>
    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
      <el-form-item label="乘客姓名" prop="field103">
        <el-input v-model="formData.field103" placeholder="请输入乘客姓名" clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input v-model="formData.mobile" placeholder="请输入手机号" :maxlength="11" show-word-limit clearable
                  prefix-icon='el-icon-mobile' :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item label="身份证号" prop="field102">
        <el-input v-model="formData.field102" placeholder="请输入身份证号" clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>
<!--      <el-form-item label="单行文本" prop="field101">-->
<!--        <el-input v-model="formData.field101" placeholder="请输入单行文本" clearable :style="{width: '100%'}">-->
<!--        </el-input>-->
<!--      </el-form-item>-->
      <el-form-item label="车票种类" prop="field101">
        <el-select v-model="formData.field101" placeholder="请选择种类" clearable size="small">
          <el-option
            v-for="dict in dict.type.type_of_train"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="单行文本" prop="field105">
        <el-input v-model="formData.field105" placeholder="请输入单行文本" clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>
      <el-form-item label="单行文本" prop="field106">
        <el-input v-model="formData.field106" placeholder="请输入单行文本" clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>
      <el-form-item label="单行文本" prop="field107">
        <el-input v-model="formData.field107" placeholder="请输入单行文本" clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>
      <el-form-item label="计数器" prop="field104">
        <el-input-number v-model="formData.field104" placeholder="计数器"></el-input-number>
      </el-form-item>
      <el-form-item size="large">
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  export default {
    dicts: ['type_of_train'],
    components: {},
    props: [],
    data() {
      return {
        formData: {
          field103: undefined,
          field102: undefined,
          field101: undefined,
          mobile: '',
          field105: undefined,
          field106: undefined,
          field107: undefined,
          field104: undefined,
        },
        rules: {
          field103: [{
            required: true,
            message: '请输入单行文本',
            trigger: 'blur'
          }],
          field102: [{
            required: true,
            message: '请输入单行文本',
            trigger: 'blur'
          }],
          field101: [{
            required: true,
            message: '请输入单行文本',
            trigger: 'blur'
          }],
          mobile: [{
            required: true,
            message: '请输入手机号',
            trigger: 'blur'
          }, {
            pattern: /^1(3|4|5|7|8|9)\d{9}$/,
            message: '手机号格式错误',
            trigger: 'blur'
          }],
          field105: [{
            required: true,
            message: '请输入单行文本',
            trigger: 'blur'
          }],
          field106: [{
            required: true,
            message: '请输入单行文本',
            trigger: 'blur'
          }],
          field107: [{
            required: true,
            message: '请输入单行文本',
            trigger: 'blur'
          }],
          field104: [{
            required: true,
            message: '计数器',
            trigger: 'blur'
          }],
        },
      }
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {},
    methods: {
      submitForm() {
        this.$refs['elForm'].validate(valid => {
          if (!valid) return
          // TODO 提交表单
        })
      },
      resetForm() {
        this.$refs['elForm'].resetFields()
      },
    }
  }

</script>
<style>
</style>
